/**
 * 图片压缩工具主要JavaScript代码
 * 实现图片上传、预览、压缩和下载功能
 */

// DOM元素
const dropArea = document.getElementById('drop-area');
const fileInput = document.getElementById('file-input');
const selectButton = document.getElementById('select-button');
const uploadArea = document.getElementById('upload-area');
const processingArea = document.getElementById('processing-area');
const qualitySlider = document.getElementById('quality-slider');
const qualityValue = document.getElementById('quality-value');
const formatSelect = document.getElementById('format-select');
const compressButton = document.getElementById('compress-button');
const downloadButton = document.getElementById('download-button');
const originalImage = document.getElementById('original-image');
const compressedImage = document.getElementById('compressed-image');
const originalSize = document.getElementById('original-size');
const originalDimensions = document.getElementById('original-dimensions');
const compressedSize = document.getElementById('compressed-size');
const compressionRatio = document.getElementById('compression-ratio');

// 变量
let currentFile = null; // 当前上传的文件
let compressedBlob = null; // 压缩后的Blob对象

/**
 * 初始化事件监听器
 */
function initEventListeners() {
    // 拖放事件
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    // 高亮显示拖放区域
    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    // 取消高亮显示
    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    // 处理拖放的文件
    dropArea.addEventListener('drop', handleDrop, false);

    // 选择文件按钮点击事件
    selectButton.addEventListener('click', () => fileInput.click());

    // 文件选择变化事件
    fileInput.addEventListener('change', handleFileSelect);

    // 压缩质量滑块变化事件
    qualitySlider.addEventListener('input', updateQualityValue);

    // 压缩按钮点击事件
    compressButton.addEventListener('click', compressImage);

    // 下载按钮点击事件
    downloadButton.addEventListener('click', downloadImage);
}

/**
 * 阻止默认行为
 * @param {Event} e - 事件对象
 */
function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

/**
 * 高亮显示拖放区域
 */
function highlight() {
    dropArea.classList.add('dragover');
}

/**
 * 取消高亮显示
 */
function unhighlight() {
    dropArea.classList.remove('dragover');
}

/**
 * 处理拖放的文件
 * @param {DragEvent} e - 拖放事件对象
 */
function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    
    if (files.length > 0) {
        handleFiles(files);
    }
}

/**
 * 处理文件选择
 * @param {Event} e - 文件选择事件对象
 */
function handleFileSelect(e) {
    if (e.target.files.length > 0) {
        handleFiles(e.target.files);
    }
}

/**
 * 处理文件
 * @param {FileList} files - 文件列表
 */
function handleFiles(files) {
    const file = files[0]; // 只处理第一个文件
    
    // 检查文件类型
    if (!file.type.match('image.*')) {
        alert('请选择图片文件！');
        return;
    }
    
    currentFile = file;
    displayOriginalImage(file);
    
    // 显示处理区域
    uploadArea.style.display = 'none';
    processingArea.style.display = 'block';
}

/**
 * 显示原始图片
 * @param {File} file - 图片文件
 */
function displayOriginalImage(file) {
    const reader = new FileReader();
    
    reader.onload = (e) => {
        originalImage.src = e.target.result;
        
        // 获取图片尺寸
        const img = new Image();
        img.onload = () => {
            originalDimensions.textContent = `${img.width} x ${img.height}`;
        };
        img.src = e.target.result;
        
        // 显示文件大小
        originalSize.textContent = formatFileSize(file.size);
    };
    
    reader.readAsDataURL(file);
}

/**
 * 格式化文件大小
 * @param {number} bytes - 字节数
 * @returns {string} 格式化后的大小
 */
function formatFileSize(bytes) {
    if (bytes < 1024) {
        return bytes + ' B';
    } else if (bytes < 1048576) {
        return (bytes / 1024).toFixed(2) + ' KB';
    } else {
        return (bytes / 1048576).toFixed(2) + ' MB';
    }
}

/**
 * 更新质量值显示
 */
function updateQualityValue() {
    qualityValue.textContent = qualitySlider.value;
}

/**
 * 压缩图片
 */
function compressImage() {
    if (!currentFile) {
        return;
    }
    
    const quality = parseInt(qualitySlider.value) / 100;
    const format = formatSelect.value;
    
    // 创建图片对象
    const img = new Image();
    img.onload = () => {
        // 创建Canvas
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        // 设置Canvas尺寸与图片相同
        canvas.width = img.width;
        canvas.height = img.height;
        
        // 绘制图片到Canvas
        ctx.drawImage(img, 0, 0);
        
        // 转换为所选格式
        canvas.toBlob((blob) => {
            if (blob) {
                compressedBlob = blob;
                
                // 显示压缩后的图片
                const url = URL.createObjectURL(blob);
                compressedImage.src = url;
                
                // 更新文件信息
                compressedSize.textContent = formatFileSize(blob.size);
                
                // 计算压缩比例
                const ratio = 100 - ((blob.size / currentFile.size) * 100);
                compressionRatio.textContent = ratio.toFixed(2) + '%';
                
                // 启用下载按钮
                downloadButton.disabled = false;
            }
        }, `image/${format}`, quality);
    };
    
    img.src = URL.createObjectURL(currentFile);
}

/**
 * 下载压缩后的图片
 */
function downloadImage() {
    if (!compressedBlob) {
        return;
    }
    
    // 创建下载链接
    const url = URL.createObjectURL(compressedBlob);
    const a = document.createElement('a');
    a.href = url;
    
    // 设置文件名
    const format = formatSelect.value;
    const originalName = currentFile.name;
    const nameWithoutExt = originalName.substring(0, originalName.lastIndexOf('.')) || originalName;
    a.download = `${nameWithoutExt}_compressed.${format}`;
    
    // 模拟点击下载
    document.body.appendChild(a);
    a.click();
    
    // 清理
    document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 100);
}

// 初始化应用
initEventListeners(); 